<script setup lang="ts">
import { onBeforeMount, onMounted, ref } from 'vue';
import {
   getHomeDetail,
   getHomeOrderList,
   getHomeTableList,
   getHomeLine,
   getHomeGantt,
   getHomePie,
   getDictionaries,
} from '@/api/home';
import { useUserStore } from '@/store/user';
import { useDictStore } from '@/store/dict';
import { ElMessage } from 'element-plus';
import PublicEcharts from '../../components/PublicEcharts.vue';
import { EChartOption } from '../../hooks/utilChart';
import { lineChart, ganttChart, pieChart } from './homeChart';

const userStore = useUserStore();
const dictStore = useDictStore();

const tableData = ref([]);
const dictionariesData = ref();
const tableLable = ref({
   name: '课程',
   todayBuy: '今日购买',
   monthBuy: '本月购买',
   totalBuy: '总购买',
});
const orderData = ref([
   {
      name: '今日支付订单',
      value: 1234,
      icon: 'SuccessFilled',
      color: '#2ac7c9',
   },
   {
      name: '今日收藏订单',
      value: 1234,
      icon: 'Star',
      color: '#2ac7c9',
   },
   {
      name: '今日未支付订单',
      value: 0,
      icon: 'Goods',
      color: '#2ac7c9',
   },
   {
      name: '本月支付订单',
      value: 0,
      icon: 'SuccessFilled',
      color: '#2ac7c9',
   },
   {
      name: '本月收藏订单',
      value: 0,
      icon: 'Star',
      color: '#2ac7c9',
   },
   {
      name: '本月未支付订单',
      value: 0,
      icon: 'Goods',
      color: '#2ac7c9',
   },
]);
const config1 = ref({
   type: 'gantt',
   width: '100%',
   height: 300,
   data: null as unknown,
});
const config2 = ref({
   type: 'gantt',
   width: '100%',
   height: 300,
   data: null as unknown,
});
const config3 = ref({
   type: 'gantt',
   width: '100%',
   height: 300,
   data: null as unknown,
});
const dictionaries = async () => {
   let params = { severname: 'home-dictionaries' };
   const { code, data, msg } = await getDictionaries(params);
   if (code === 200) dictStore.setDict(data);
   else ElMessage.error({ message: msg });
};
const tableList = async () => {
   let params = { severname: 'home-list', page: 1, pageSize: 10 };
   const { code, data, msg } = await getHomeTableList(params);
   if (code === 200) tableData.value = data.list;
   else ElMessage.error({ message: msg });
};
const orderList = async () => {
   const { code, data, msg } = await getHomeOrderList({ severname: 'home-order' });
   if (code === 200) {
      data.list.map((item: any, index: any) => {
         orderData.value[index].value = item.number;
         orderData.value[index].icon = item.img;
      });
   } else {
      ElMessage.error({ message: msg });
   }
};
const lineData = async () => {
   const { code, data, msg } = await getHomeLine({ severname: 'home-line' });
   if (code === 200) {
      config1.value.data = lineChart(data);
   } else {
      ElMessage.error({ message: msg });
   }
};
const ganttData = async () => {
   const { code, data, msg } = await getHomeGantt({ severname: 'home-gantt' });
   if (code === 200) {
      config2.value.data = ganttChart(data);
   } else {
      ElMessage.error({ message: msg });
   }
};
const pieData = async () => {
   const { code, data, msg } = await getHomePie({ severname: 'home-pie' });
   if (code === 200) {
      config3.value.data = pieChart(data);
   } else {
      ElMessage.error({ message: msg });
   }
};

// const detail = async () => {
//    const { code, data, msg } = await getHomeDetail();
//    if (code === 200) {
//       // 提交登陆请求
//    }
// };

onBeforeMount(() => {
   dictionaries();
   tableList();
   orderList();
   lineData();
   ganttData();
   pieData();
});
</script>

<template>
   <div class="home">
      <el-row :gutter="24">
         <el-col :span="10">
            <el-card class="box-card">
               <div class="user-info">
                  <img :src="userStore.userInfo?.avatar" />
                  <div class="user-name" style="margin-left: 20px">
                     <p>{{ userStore.userInfo?.uesrname }}</p>
                     <p>
                        <span v-for="item in userStore.userInfo?.roles">{{ item }}</span>
                     </p>
                  </div>
               </div>
               <div class="login-info">
                  <p>
                     上次登陆时间：<span>{{ userStore.userInfo?.lasttime }}</span>
                  </p>
                  <p>
                     上次登录地点：<span>{{ userStore.userInfo?.city }}</span>
                  </p>
               </div>
            </el-card>
            <el-card class="buy-info" style="margin-top: 20px">
               <el-table :data="tableData" size="small">
                  <el-table-column
                     v-for="(val, key) in tableLable"
                     :key="key"
                     :prop="key"
                     :label="val"
                  >
                  </el-table-column>
                  <template #empty>
                     <el-empty description="暂无数据" v-if="!tableData.length" />
                  </template>
               </el-table>
            </el-card>
         </el-col>
         <el-col :span="14">
            <div class="order-info">
               <el-card
                  v-for="item in orderData"
                  :key="item.name"
                  :body-style="{ display: 'flex', padding: 0 }"
               >
                  <div class="icon no-inherit" :style="{ background: item.color }">
                     <img :src="item.icon" />
                  </div>
                  <div class="detail">
                     <p class="num">￥{{ item.value }}</p>
                     <p class="txt">{{ item.name }}</p>
                  </div>
               </el-card>
            </div>
            <div class="el-card">
               <PublicEcharts v-if="config1.data" :configData="config1"></PublicEcharts>
            </div>
            <div class="graph">
               <div class="el-card">
                  <PublicEcharts v-if="config2.data" :configData="config2"></PublicEcharts>
               </div>
               <div class="el-card">
                  <PublicEcharts v-if="config3.data" :configData="config3"></PublicEcharts>
               </div>
            </div>
         </el-col>
      </el-row>
   </div>
</template>

<style lang="scss" scoped>
.home {
   height: 100%;
}
.user-info {
   display: flex;
   align-items: center;
   padding-bottom: 20px;
   border-bottom: 1px solid #cccccc;
   img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
   }
}
.login-info {
   text-align: left;
   margin-top: 20px;
}
.box-card p {
   line-height: 1;
   padding-bottom: 10px;
}
.order-info {
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   .el-card {
      display: grid;
      grid-template-columns: 200px;
      grid-template-rows: auto auto;
      margin-bottom: 10px;
      .icon {
         width: 25%;
         padding-top: 20px;
      }
      .detail {
         width: 75%;
         padding: 10px;
         align-items: center;
         p {
            text-align: left;
         }
      }
   }
}
.graph {
   display: flex;
   .el-card {
      width: 50%;
   }
}
svg {
   width: 14px;
   height: 14px;
   margin-right: 5px;
   padding-top: -1px;
}
</style>
